<template>
     <ul class="list">
       <li
         class="item"
         v-for="item of letters"
         :key="item"
         :ref="item"
         @click="cityClick"
         @touchstart="handleTouchStart"
         @touchmove="handleTouchMove"
         @touchend="handleTouchEnd"
       >{{item}}</li>
     </ul>
</template>
<script>
    export default {
        name: "Aside",
        props:{
           aside:Object
        },
        computed :{
          //将aside转为数组
          letters(){
            const letters=[];
            for(let i in this.aside){
              letters.push(i);//将ABCD...传入数组
            }
            return letters
          }
        },
        data () {
          return {
            touchStatus:false,//定义开关
            startY:0,
            timer:null
          }
        },
        updated () {//声明周期钩子函数 当页面渲染完成后执行
          this.startY=this.$refs['A'][0].offsetTop;//获得"A"离最外层div上边距离
        },
        methods:{
          cityClick(e){
            //向外触发事件
            // console.log(e.target.innerText);
           this.$emit('change',e.target.innerText);
          },
          handleTouchStart(){
            this.touchStatus=true;
          },
          handleTouchMove(e){
             if(this.touchStatus){
               if(this.timer){
                 clearTimeout(this.timer);
               }
               this.timer=setTimeout(()=>{
                 const touchY=e.touches[0].clientY-80;//获得当前触发点离最外层div上边的距离
                 const index=Math.floor((touchY-this.startY)/20);//计算出当前触发点的下标
                 if(index>=0 && index<this.letters.length){
                   this.$emit("change",this.letters[index]);//向父级触发change事件
                 }
                 //console.log(index);
               },16)
             }
          },
          handleTouchEnd(){
            this.touchStatus=false;
          }
        }
    }
</script>
<style lang="stylus" scoped>
   .list{
     width:.2rem;
     position :absolute;
     top:.8rem;
     right:0;
     bottom:0;
     display:flex;
     flex-direction column
     justify-content center
     .item{
       text-align center
       line-height .2rem
       color:#00bcd4;
     }
   }
</style>
